<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stroke test</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    h1 {
        margin: 14px;
        width: 100%;
        text-align: center;
    }

    .content {
        width: 100vw;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        margin: 12px 0;
    }

    .content .render_btn {
        margin: 16px auto;
        width: 100px;
    }

    .content .canvas_content {
        width: 50%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .canvas_pro,
    .native_canvas {
        width: 350px;
        height: 350px;
        border: 1px solid black;
    }

    h1 {
        width: 100%;
        text-align: center;
    }
</style>
<body>
    <h1>stroke</h1>
    <div class="content">
        <div class="canvas_content">
            <canvas class="canvas_pro" width="350" height="350"></canvas>
            <span>canvas_pro</span>
            <button class="render_btn" data-ref="pro_btn">
                render
            </button>
        </div>
        <div class="canvas_content">
            <canvas class="native_canvas"></canvas>
            <span>native canvas</span>
            <button class="render_btn" data-ref="native_btn">
                render
            </button>
        </div>
    </div>
</body>
<script type="module">
    import { transformCanvasCtx } from '../dist/index.js'
    const dpr = window.devicePixelRatio
    const drawStroke = (ctx, R, r, O) => {
        let x1 = R - O,
            y1 = 0,
            i = 1
        x2 = R - 0
        y2 = 0
        // ctx.translate(350, 350)
        ctx.beginPath()
        for (; i < 20000 || (x2 == R - O && y2 === 0); i++) {
            //最大迭代20000次，调的太大页面容易挂起，比较耗资源
            var x2 =
                (R + r) * Math.sin((i * Math.PI) / 72) -
                (r + O) * Math.sin(((R + r) / r) * ((i * Math.PI) / 72)),
                y2 =
                    (R + r) * Math.cos((i * Math.PI) / 72) -
                    (r + O) * Math.cos(((R + r) / r) * ((i * Math.PI) / 72))
            ctx.lineTo(x2, y2)
            x1 = x2
            y1 = y2
        }
        ctx.stroke()
    }

    document.addEventListener('DOMContentLoaded', function () {
        const canvas_pro = document.querySelector('.canvas_pro')
        const canvas_native = document.querySelector('.native_canvas')
        const pro = transformCanvasCtx(canvas_pro)
        const native = canvas_native.getContext('2d')
        canvas_native.width = canvas_native.height = 350 * dpr
        document.querySelector('[data-ref="pro_btn"]').onclick = () => {
            drawStroke(pro, 800, -239, 100)
        }
        document.querySelector('[data-ref="native_btn"]').onclick = () => {
            drawStroke(native, 800, -239, 100)
        }
    })

</script>

</html>